<template>
  <div class="homepage">
    <!-- 分类型特征相关性 -->
    <div class="top">
      分析得出： “性别” 和 “饮食习惯” 之间存在显著的相关性（p值 &lt; 0.05）。
      其他分类特征之间不存在显著的相关性。
    </div>
    <div class="bottom">
      <div class="box">
        <correlation_bar2 />
      </div>
      <div class="box">
        <correlation_bar3 />
      </div>
      <div class="box">
        <correlation_bar4 />
      </div>
      <div class="box">
        <correlation_bar5 />
      </div>
    </div>
  </div>
</template>

<script setup></script>

<style lang="scss" scoped>
.homepage {
  height: 100vh;
  padding: 10px;
  width: 100%;
  display: flex;
  flex-direction: column;
  .top {
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    color: #5c5d5d;
    margin-bottom: 10px;
  }
  .bottom {
    flex: 1;
    // background: #c04c4c;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    .box {
      position: relative; // 为子组件定位提供基准
    //   background: #76cc8f;
    }
  }
}
</style>
